<template>
  <view class="article">
    <rich-text :nodes="content"></rich-text>
    <div v-if="showBtn" class="btn-wrap">
      <button type="default" size="mini" @click="saveFile">
        <img :src="savePng" alt="保存图片" />
        <span>保存图片</span>
      </button>
      <button type="default" size="mini" open-type="share">
        <img :src="sharePng" alt="保存" />
        <span>分享</span>
      </button>
    </div>
  </view>
</template>

<script>
import { getArticleDetails, getCurrentUserInfo } from '@/api/join';
import sharePng from '@/static/icon/share.png';
import savePng from '@/static/icon/save.png';

export default {
  data() {
    return {
      id: '',
      title: '',
      content: '',
      contentImg: '',
      sharePng,
      savePng,
      showBtn: false,
      currentUserInfo: {}
    };
  },

  onLoad(opts) {
    // console.log('opts:', opts);
    // console.log('this.$store.getters.launchOptions:', this.$store.getters.launchOptions);
    let query = this.$store.getters.launchOptions.query || {};
    let id = (opts && opts.id) || query.id;
    this.id = id;
    // 初始化
    this.showBtn = false;
    this.init();
    if (wx.getStorageSync('token')) {
      getCurrentUserInfo().then((res) => {
        if (res.code === 0) {
          this.currentUserInfo = res.data;
        } else {
          this.$message({
            type: 'error',
            message: '获取当前用户信息失败'
          });
        }
      });
    }
  },

  methods: {
    async init() {
      const res = await getArticleDetails(this.id);
      if (res.code === 0) {
        let data = res.data;
        this.title = data.title;
        this.content = data.content;
        this.contentImg = data.contentImg;
        setTimeout(() => {
          this.showBtn = true;
        }, 500);
      }
    },
    // 需求2693，分享给朋友
    onShareAppMessage: function (e) {
      let title = this.title;
      return {
        title: title,
        path: `pages/learn/detail?id=${this.id}&cid=` + this.currentUserInfo.cid,
        imageUrl: this.contentImg
      };
    },
    saveFile() {
      // uni.showLoading({
      //   title: '下载中'
      // });
      try {
        wx.downloadFile({
          url: this.contentImg,
          success: (res) => {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: (res) => {
                // debugger;
                // uni.hideLoading();
                uni.showToast({
                  title: '保存成功',
                  duration: 5000
                });
              },
              fail: () => {
                // uni.hideLoading();
                uni.showToast({
                  title: '保存失败'
                });
              }
              // complete: () => {
              //   uni.hideLoading();
              // }
            });
          }
        });
      } catch (e) {
        // uni.hideLoading();
      }
    }
  }
};
</script>

<style lang="scss">
.article {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: scroll;
  background: #ffffff;
  .title {
    font-size: 36rpx;
    margin: 20rpx 0;
    font-weight: bold;
  }
  .time {
    font-size: 24rpx;
    margin: 16rpx 0;
    color: #b1b1b1;
  }
  .btn-wrap {
    display: flex;
    margin-top: 20rpx;
    align-items: center;
    margin-bottom: 20rpx;
    button {
      height: 64rpx;
      border-radius: 32rpx;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #707070;
      img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
